<style lang="scss" scoped>
.classifyou {
  .el-main {
    padding: 16px 16px 0px 16px;
    .cs-classify {
      border: 1px solid #eeeeee;
      width: 100%;
      .classify-search {
        background: #e5f1fb;
        border-left: 2px solid #2387e2;
        height: 52px;
        line-height: 52px;
        padding-left: 10px;
        // position: relative;
        .search-dept {
          float: left;
        }
        .is-active {
          .el-radio-button__inner {
            background-color: #409eff;
            border-color: #409eff;
          }
        }
        .search-my {
          float: left;
          margin-left: 20px;
        }
        .search-month {
          float: left;
          margin-left: 20px;
          .el-range__close-icon {
            display: none;
          }
        }
      }
      .classify-data {
        text-align: center;
        width: 100%;
        height: calc(100vh - 148px);
        padding-top: 20px;
      }
    }
  }
}
</style>

<template>
  <el-container class="classifyou">
    <!-- 主要区域容器 -->
    <el-main>
      <!-- 处室工单类别统计 -->
      <div class="cs-classify">
        <div class="classify-search">
          <div class="search-dept">
            <!-- <el-radio-group v-model="classifyDeptId" size="small" @change="deptChangeFn">
              <el-radio-button
                :label="item.bmid"
                v-for="(item, index) in deptListData"
                :key="index"
              >{{item.bmjc}}</el-radio-button>
            </el-radio-group>-->
            <el-select
              style="width:160px;"
              size="small"
              @change="deptChangeFn"
              v-model="classifyDeptId"
            >
              <el-option
                :label="item.bmjc"
                v-for="(item, index) in deptListData"
                :key="index"
                :value="item.bmid"
              ></el-option>
            </el-select>
          </div>
          <div class="search-my">
            <el-radio-group v-model="effiencyMonth" size="small" @change="deptEffiencyItemChange">
              <el-radio-button label="1">本月</el-radio-button>
              <el-radio-button label="2">上月</el-radio-button>
              <el-radio-button label="3">本年</el-radio-button>
              <el-radio-button label="4">去年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="search-month">
            <span class="demonstration">自定义：</span>
            <el-date-picker
              v-model="effiencyMonthValue"
              type="monthrange"
              align="right"
              unlink-panels
              size="small"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
              @change="deptEffiencyDefineChange"
            ></el-date-picker>
          </div>
          <div style="float:right;margin-right:15px;">
            <el-button type="info" plain size="small" @click="doReset" icon="el-icon-refresh">重置</el-button>
          </div>
        </div>
        <div
          class="classify-data"
          id="deptEffityChartDiv"
          ref="deptEffityChartDiv"
          v-loading="loadingCharts"
        ></div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// 引入基本模板
// 引入环形图图组件
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
// 引入提示框和title组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
let echarts = require('echarts/lib/echarts')

export default {
  data () {
    return {
      // 处室查询条件
      countPojo: {
        deptId: '',
        dateList: '',
        dateItem: '',
        dateType: 'i'
      },
      deptListData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      loadingCharts: false,
      classifyDeptId: '',
      effiencyMonth: '3',
      effiencyMonthValue: '',
      // 处室办理时效统计
      deptEffiecyData: {
        name: '',
        value: ''
      }
    }
  },
  methods: {
    // 查询单位树信息
    getDeptData () {
      this.$axios.post(this.$api.dept.selector).then(rs => {
        if (rs) {
          // console.log(rs);
          this.deptListData = Object.assign(this.deptListData, rs)
          let data = this.deptListData[0].bmid
          this.deptChangeFn(data)
        }
      })
    },
    // tree点击
    deptChangeFn (data) {
      this.classifyDeptId = data
      this.getDeptEffityCharts()
    },
    // 查询方法
    deptEffiencyItemChange () {
      this.effiencyMonthValue = ''
      this.countPojo.dateType = 'i'
      this.getDeptEffityCharts()
    },
    deptEffiencyDefineChange () {
      this.effiencyMonth = ''
      this.countPojo.dateType = 'd'
      this.getDeptEffityCharts()
    },
    // 条件重置
    doReset () {
      this.effiencyMonth = '3'
      this.effiencyMonthValue = ''
      this.countPojo.dateType = 'i'
      this.getDeptEffityCharts()
    },
    // 个处理办理时效统计
    getDeptEffityCharts () {
      const _this = this
      _this.countPojo.deptId = _this.classifyDeptId
      _this.countPojo.dateList = _this.effiencyMonthValue
      _this.countPojo.dateItem = _this.effiencyMonth
      // console.log(_this.countPojo);
      _this.loadingCharts = true
      _this.$axios
        .post(_this.$api.countCharts.deptCategoriesCharts, _this.countPojo)
        .then(rs => {
          // if (rs) {
          _this.deptEffiecyData = rs
          _this.loadingCharts = false
          // console.log(this.deptEffiecyData)
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(_this.$refs.deptEffityChartDiv)
          if (!myChart) return
          // 绘制图表
          myChart.clear()
          myChart.setOption({
            title: {
              text: '处室类别工单数量',
              x: 'center'
            },
            tooltip: {
              trigger: 'axis',
              formatter: '{a} <br/>{b} : {c} ',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '48px',
              right: '60px',
              top: '48px',
              bottom: '100px',
              containLabel: false
            },
            calculable: false,
            xAxis: [
              {
                name: '类别',
                type: 'category',
                data:
                  undefined === rs ? [] : _this.deptEffiecyData.name.split(','),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 12 // 让字体变大
                  },
                  rotate: 22
                }
              }
            ],
            yAxis: [
              {
                name: '工单数量(件)',
                type: 'value',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              }
            ],
            series: [
              {
                data:
                  undefined === rs
                    ? []
                    : _this.deptEffiecyData.value.split(','),
                name: '工单数量(件)',
                type: 'bar',
                barCategoryGap: '50%',
                showSymbol: true,
                symbol: 'circle', // 设定为实心点
                symbolSize: 16, // 设定实心点的大小
                itemStyle: {
                  normal: {
                    color: '#409EFF',
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: 14 // 让字体变大
                    }
                  }
                },
                markPoint: {
                  data: [
                    { type: 'max', name: '最大值' },
                    { type: 'min', name: '最小值' }
                  ],
                  itemStyle: {
                    normal: {
                      color: '#409EFF'
                    }
                  }
                }
              }
            ]
          })
          // } else {
          //   _this.loadingCharts = false

          // }
        })
    }
  },
  created: function () {
    this.getDeptData()
    this.getDeptEffityCharts()
  }
}
</script>
